<template>
    <div class="myChart chart">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">油品数据分析</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;height: 20px;">
       <div style="display: flex;justify-content: space-evenly;position: relative;">
            <div class="box">
                <img src="../../assets/images/circle-data.png" alt="" class="img">
                <span class="title">数值</span>
                <span class="label">粘度分析</span>
            </div>
            <div class="box">
                <img src="../../assets/images/circle-data.png" alt="" class="img">
                <span class="title">数值</span>
                <span class="label">粘度分析</span>
            </div>
            <div class="box">
                <img src="../../assets/images/circle-data.png" alt="" class="img">
                <span class="title">数值</span>
                <span class="label">粘度分析</span>
            </div>
            <div class="box">
                <img src="../../assets/images/circle-data.png" alt="" class="img">
                <span class="title">数值</span>
                <span class="label">粘度分析</span>
            </div>
       </div>
       <dv-scroll-board :config="alarmDataConfig" style="width:90%;height:65%;padding-left: 8%;" />
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { listRecord } from '../../api/oil/record';
export default {
    name: 'AlarmInfo',
    data() {
        return {
            alarmDataConfig: {},
            config:{ header: ['预警机组', '预警内容','预警时间','处理状态'], columnWidth:[220,220,225,120], headerBGC: 'transparent', headerColor: '#fff', oddRowBGC: 'transparent', evenRowBGC: 'transparent', oddRowColor: '#fff', evenRowColor: '#fff'},
            alarmData: [],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var query = {
                pageNum: 1,
                pageSize: 10
            };
            listRecord(query).then(res => {
                console.log(res);
                this.alarmData = res.rows.map(obj=>[obj.deviceName, obj.message, obj.lastOccurTime, obj.stateName]);
                this.config.data = this.alarmData;
                this.alarmDataConfig = this.config;
                console.log(this.alarmDataConfig);
            });
        }
    },
    mounted() {
    }
};
</script>

<style>
.box{
    display: inline-block;
    position: relative;
    color: white;

    .img{
        width: 75%;
    }

    .title{
        position: absolute;
        top: 22%;
        left: 27%;
        display: block;
        font-size: 14px;
    }

    .label{
        position: absolute;
        top: 45%;
        left: 15%;
        font-size: 16px;
    }
}
.chart .dv-scroll-board .header {
  background: transparent;
  margin-top: 5px;
}
</style>